{extend name="common/__base" /}
{block name="body"}
<table id="table" lay-filter="table"></table>

<!--显示栏-->
<script id="is_show" type="text/html">
    <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="is_show" {{d.is_show ? "checked" : ""}}>
</script>

<!--操作栏-->
<script id="operation" type="text/html">
    <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
    <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</button>
</script>

<!--工具栏-->
<script id="toolbar" type="text/html">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加菜单</button>
    <button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon layui-icon-refresh-3"></i></button>
</script>
{/block}

{block name="js"}
<script>
    var table = layui.table;
    var form = layui.form;

    // 数据表格
    var dataTable = table.render({
        elem: "#table",
        cols: [[ //表头
            {field: 'title', title: '菜单名'},
            {field: 'name', title: '路由地址'},
            {field: 'sort', title: '排序', edit: 'text'},
            {field: 'is_show', title: '是否显示' , templet: '#is_show'},
            {title:'操作', toolbar: '#operation'}
        ]],
        url: "{:url('admin/system/menuList')}",
        method: "post",
        parseData: function (ret) {
            return {
                code: ret.code,
                msg: ret.msg,
                count: ret.data.count,
                data: ret.data.data
            };
        },
        toolbar:'#toolbar',
        even: true
    });

    // 显示隐藏
    form.on("switch(is_show)", function (obj) {
        var isShow = 0;
        if (obj.elem.checked) {
            isShow = 1;
        } else {
            isShow = 0;
        }
        $.ajax({
            url: "{:url('admin/system/showMenu')}",
            type: "post",
            data: {menu_id: obj.value, is_show: isShow},
            dataType: "json",
            success: function (ret) {
                layer.msg(ret.msg);
                if (ret.code != 1) {
                    obj.elem.checked = !isShow;
                    form.render();
                }
            }
        });
    });

    // 排序
    table.on("edit(table)", function (obj) {
        var that = $(this).prev();
        var oldSort = that.html();
        $.ajax({
            url: "{:url('admin/system/sortMenu')}",
            type: "post",
            data: {menu_id: obj.data.id, sort: obj.value},
            dataType: "json",
            success: function (ret) {
                layer.msg(ret.msg);
                if (ret.code != 1) {
                    that.html(oldSort);
                }
            }
        });
    });

    // 工具事件--编辑、删除
    table.on("tool(table)", function (obj) {
        if (obj.event == "edit") {
            layer.open({
                type: 2,
                title: "编辑菜单",
                shade: 0.6,
                shadeClose: true,
                area: ["500px", "500px"],
                maxmin: true,
                content: "{:url('admin/system/editMenu')}?menu_id=" + obj.data.id
            });
        } else if (obj.event == "del") {
            layer.confirm("确定删除吗？", {icon: 3, title: "删除菜单"}, function () {
                $.ajax({
                    url: "{:url('admin/system/delMenu')}",
                    type: "post",
                    data: {menu_id: obj.data.id},
                    dataType: "json",
                    success: function (ret) {
                        layer.msg(ret.msg);
                        if (ret.code == 1) {
                            obj.del();
                        }
                    }
                });
            });
        }
    });

    // 工具栏事件--添加、刷新
    table.on("toolbar(table)", function (obj) {
        if (obj.event == "add") {
            layer.open({
                type: 2,
                title: "添加菜单",
                shade: 0.6,
                shadeClose: true,
                area: ["500px", "500px"],
                maxmin: true,
                content: "{:url('admin/system/addMenu')}"
            });
        } else if (obj.event == "refresh") {
            location.reload();
        }
    });
</script>
{/block}